<template>
    <view>
        <view class="page-body">
            <view class="section tc">
				<text class="message">bilibili献给新一代的演讲《后浪》</text>
                <video class="_video" id="myVideo" src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/02/34/186803402/186803402-1-208.mp4?e=ig8euxZM2rNcNbNH7wdVhwdlhbeMhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1640693752&gen=playurlv2&os=kodobv&oi=707988852&trid=fbf39b5cb19e4fb99d15def8219b3625T&platform=html5&upsig=4ff39a18e7f9a793ba95add2db5d507e&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0&bvc=vod&nettype=0&bw=295731&orderid=0,1&logo=80000000#vp" @error="videoErrorCallback" :danmu-list="danmuList"
                    enable-danmu danmu-btn controls></video>

                <view class="uni-list">
                    <view class="uni-list-cell">
                        <view>
                            <view class="uni-label">弹幕内容</view>
                        </view>
                        <view class="uni-list-cell-db">
                            <input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                        </view>
                    </view>
                </view>
                <view class="btn-area">
                    <button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
                </view>
            </view>
        </view>
		
		
		
		<view class="page-body">
		    <view class="section tc">
				<text class="message">【何同学】80年代的电脑能做什么？苹果麦金塔深度体验</text>
		        <video class="_video" id="myVideo" src="https://upos-sz-mirrorcos.bilivideo.com/upgcxcode/31/04/252900431/252900431-1-208.mp4?e=ig8euxZM2rNcNbRM7WdVhwdlhWKBhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1640693872&gen=playurlv2&os=bcache&oi=3729360616&trid=00001397b9a8177041009e8bf33495e643a6T&platform=html5&upsig=227349119fd994d794b2d64b0f01adfc&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&cdnid=63402&mid=0&bvc=vod&nettype=0&bw=146103&orderid=0,1&logo=80000000#vp" @error="videoErrorCallback" :danmu-list="danmuList"
		            enable-danmu danmu-btn controls></video>
		
		        <view class="uni-list">
		            <view class="uni-list-cell">
		                <view>
		                    <view class="uni-label">弹幕内容</view>
		                </view>
		                <view class="uni-list-cell-db">
		                    <input @blur="bindInputBlur" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
		                </view>
		            </view>
		        </view>
		        <view class="btn-area">
		            <button @tap="bindSendDanmu" class="page-body-button" formType="submit">发送弹幕</button>
		        </view>
		    </view>
		</view>
    </view>
</template>


<script>
	export default {
	    data() {
	        return {
	            title: 'video',
	            src: '',
	            inputValue: '',
	            danmuList: [{
	                    text: '第 1s 出现的弹幕',
	                    color: '#ff0000',
	                    time: 1
	                },
	                { 
	                    text: '第 3s 出现的弹幕',
	                    color: '#ff00ff',
	                    time: 3
	                }
	            ]
	        }
	    },
	    onReady: function (res) {
	        this.videoContext = uni.createVideoContext('myVideo')
	    },
	    methods: {
	        bindInputBlur: function (e) {
	            this.inputValue = e.target.value
	        },
	        bindButtonTap: function () {
	            var that = this
	            uni.chooseVideo({
	                sourceType: ['album', 'camera'],
	                maxDuration: 60,
	                camera: ['front', 'back'],
	                success: function (res) {
	                    this.src = res.tempFilePath
	                }
	            })
	        },
	        bindSendDanmu: function () {
	            this.videoContext.sendDanmu({
	                text: this.inputValue,
	                color: this.getRandomColor()
	            })
	        },
	        videoErrorCallback: function (e) {
	            console.log('视频错误信息:')
	            console.log(e.target.errMsg)
	        },
	        getRandomColor: function () {
	            const rgb = []
	            for (let i = 0; i < 3; ++i) {
	                let color = Math.floor(Math.random() * 256).toString(16)
	                color = color.length == 1 ? '0' + color : color
	                rgb.push(color)
	            }
	            return '#' + rgb.join('')
	        }
	    }
	}
	
	
	
	
</script>


<style>
	._video{
		width: 100%;

	}
	
	.message  {
        font-size:20px;
		border-left: 4rpx;
    }
	
</style>